{% extends 'base.html' %}
{% block css %}
    .search-result {
        margin-bottom: 30px;
        margin-left: 60px;
    }

    .search-title {
        color: blue;
        font-size: 24px;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .search-title:hover {
        text-decoration: underline;
    }

    .search-content {
        font-size: 18px;
    }

    .input-group>.form-control:not(:first-child) {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }
    .my-page-item {
        margin-left:60px;
    }

{% endblock %}
{% block content %}

    <div class="content">
    <form action="" method="post" onsubmit="return false;" class="my-search-form my-search-form-left">
        {% csrf_token %}
        <div class="form-group">
            <div class="input-group">
                <a href="{% url 'page_search' %}">
                    <div class="logo">
                        <img src="/static/images/dang.png" alt="Logo" style="height: 38px">
                    </div>
                </a>
                <input type="text" class="form-control" id="keyword" name="keyword"
                       placeholder="请输入要查询的关键词" value="{{ keyword }}">
                <div class="input-group-append">
                    <div class="btn btn-outline-secondary icon-button" type="button" id="search-button" onclick=search()>
                        <i class="fa fa-search"></i>
                    </div>
                </div>
            </div>
        </div>
    </form>

    {% if info %}
        <h2>{{ info }}</h2>
    {%  else %}
        {% for meeting in meetings %}
            <div class="search-result">
                <h2 class="search-title" onclick="openFunction('{{ meeting.title }}')">{{ meeting.title }}</h2>
                <p class="search-content">包含如下文件: {{ meeting.content }}</p>
            </div>
        {% endfor %}
        <nav aria-label="Page navigation example ">
            <ul class="pagination my-page-item">
                <li class="page-item {{ pre_state }}">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% for page_index in pages %}
                    {% if page_index == curr_page %}
                        <li class="page-item active"><a class="page-link" onclick="jumpPage('{{ page_index }}')">{{ page_index }}</a></li>
                    {% else %}
                        <li class="page-item"><a class="page-link" onclick="jumpPage('{{ page_index }}')">{{ page_index }}</a></li>
                    {% endif %}
                {% endfor %}
                <li class="page-item {{ aft_state }}">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    {% endif %}


    <div class="alert alert-danger hide fade" id="alert-danger"></div>
    <div class="alert alert-success hide fade" id="alert-success"></div>
</div>
{% endblock %}
{% block script %}
    <script>
        var context = JSON.parse('{{ data | escapejs }}');

        $("#keyword").keypress(function (e) {
            if (e.which === 13) {
                search();
            }
        });
        function openFunction(title) {
            var data_obj = {
                'folder_name': title,
            };
            var csrftoken = $("input[name='csrfmiddlewaretoken']").val();
            $.ajaxSetup({
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            });

            $.ajax({
                url: '/api/openfolder',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify(data_obj),
                success: function (data, status, xmlHttpRequest) {
                },
                error: function (xmlHttpRequest) {
                    showAlert("#alert-danger", xmlHttpRequest.statusText)
                }
            });
        }

        function jumpPage(page) {
            if(page === context["curr_page"]) return;

            let keyword = context["keyword"];
            var data_obj = {
                "keyword": keyword,
                "page": page,
            }

            var temp = document.createElement("form");
            temp.action = "/api/search";
            temp.method = "post";
            temp.style.display = "none";

            for (var x in data_obj) {
                var opt = document.createElement("textarea");
                opt.name = x;
                opt.value = data_obj[x];
                temp.appendChild(opt);
            }

            document.body.appendChild(temp);
            temp.submit();
        }

        function checkSubmit() {
            if ($("#keyword").val() === '') {
                showAlert("#alert-danger", "输入内容为空，请填写内容后再提交")
                return false;
            }
            return true;
        }

        function search() {
            if (checkSubmit() === false) return;

            let keyword = $("#keyword").val();
            var data_obj = {
                "keyword": keyword,
                "page": 1,
            }

            var temp = document.createElement("form");
            temp.action = "/api/search";
            temp.method = "post";
            temp.style.display = "none";

            for (var x in data_obj) {
                var opt = document.createElement("textarea");
                opt.name = x;
                opt.value = data_obj[x];
                temp.appendChild(opt);
            }

            document.body.appendChild(temp);
            temp.submit();
        }
    </script>
{% endblock %}